@import "common.less";
.content-list {
    li {
        display: none;
        h2 {
            margin: .35rem auto .2rem;
            width: 100%;
            color: @c-black;
            .fs(35);
            text-align: center;
            font-weight: 500;
        }
        h3 {
            margin: auto;
            color: #000000;
            .fs(28);
            text-align: center;
            font-weight: 400;
        }
        p {
            margin: .05rem auto;
            color: @c-666;
            .fs(24);
            text-align: center;
        }
        .item-box {
            position: relative;
            min-height: 2.5rem;
            p {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                margin: 0 auto;
                text-align: center;
            }
            p.item-name {
                top: .35rem;
                .fs(42);
                color: @c-white;
            }
            p.item-desc {
                top: .75rem;
                .fs(28);
                color: @c-c3;
            }
        }
        img {
            width: 100%;
            height: auto;
        }
        .first-box {
            overflow: hidden;
            padding-bottom: .35rem;
            background: url("../img/mxy/2/1-bg.jpg") no-repeat bottom center;
            background-size: 100% auto;
            .sub-title {
                margin-bottom: .25rem;
            }
            .radius-icon-list {
                margin: 0 .35rem;
                .col {
                    margin: 0 0 .1rem 0;
                    text-align: center;
                    div {
                        display: inline-block;
                        width: .65rem;
                        height: .65rem;
                        text-align: center;
                        -webkit-border-radius: 50%;
                        -moz-border-radius: 50%;
                        -o-border-radius: 50%;
                        border-radius: 50%;
                        p {
                            margin: 0;
                            .fs(24);
                            color: @c-white;
                        }
                        .radius-title {
                            margin: .1rem 0 0 0;
                            display: block;
                            text-align: center;
                            color: @c-white;
                            font-style: normal;
                            .fs(35);
                        }
                    }
                    .green-1 {
                        background-color: #3ae7c8;
                    }
                    .green-2 {
                        background-color: #72ece7;
                    }
                    .green-3 {
                        background-color: #16cae5;
                    }
                    .green-4 {
                        background-color: #00aeff;
                    }
                    .green-5 {
                        background-color: #0078ff;
                    }
                    .green-6 {
                        background-color: #4e25ff;
                    }
                }
            }
        }
        .three-box {
            overflow: hidden;
            background: url("../img/mxy/2/3-bg.jpg") no-repeat bottom center;
            background-size: 100% auto;
        }
        .world-icon-list {
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 100%;
            box-sizing: border-box;
            i {
                display: block;
                margin: .18rem auto 0;
                width: .5rem;
                height: .5rem;
            }
            p {
                margin: 0 auto;
                .fs(28);
                color: @c-white;
            }
            .world-icon-1 {
                background: url("../img/mxy/2/2-1.png") no-repeat center;
                background-size: .35rem .4rem;
            }
            .world-icon-2 {
                background: url("../img/mxy/2/2-2.png") no-repeat center;
                background-size: .35rem .4rem;
            }
            .world-icon-3 {
                background: url("../img/mxy/2/2-3.png") no-repeat center;
                background-size: .35rem .4rem;
            }
            .world-icon-4 {
                background: url("../img/mxy/2/2-4.png") no-repeat center;
                background-size: .35rem .4rem;
            }
            .world-icon-5 {
                background: url("../img/mxy/2/2-5.png") no-repeat center;
                background-size: .35rem .4rem;
            }
            .world-icon-6 {
                background: url("../img/mxy/2/2-6.png") no-repeat center;
                background-size: .35rem .4rem;
            }
            .world-icon-7 {
                background: url("../img/mxy/2/2-7.png") no-repeat center;
                background-size: .35rem .4rem;
            }
        }
        .world-icon-list-top {
            padding: 0 .15rem;
            top: 1.2rem;
        }
        .world-icon-list-bottom {
            padding: 0 .4rem;
            top: 1.9rem;
        }
        .skill-icon-list {
            margin: 0 auto;
            width: 100%;
            box-sizing: border-box;
            i {
                display: block;
                margin: .18rem auto 0;
                width: .5rem;
                height: .5rem;
            }
            p {
                margin: .05rem auto 0;
                .fs(28);
                color: @c-666;
            }
            .skill-icon-1 {
                background: url("../img/mxy/2/3-1.png") no-repeat center;
                background-size: 100% auto;
            }
            .skill-icon-2 {
                background: url("../img/mxy/2/3-2.png") no-repeat center;
                background-size: 100% auto;
            }
            .skill-icon-3 {
                background: url("../img/mxy/2/3-3.png") no-repeat center;
                background-size: 100% auto;
            }
            .skill-icon-4 {
                background: url("../img/mxy/2/3-4.png") no-repeat center;
                background-size: auto 100%;
            }
            .skill-icon-5 {
                background: url("../img/mxy/2/3-5.png") no-repeat center;
                background-size: 100% auto;
            }
            .skill-icon-6 {
                background: url("../img/mxy/2/3-6.png") no-repeat center;
                background-size: 100% auto;
            }
        }
        .skill-icon-list-top {
            margin: .2rem 0 .25rem;
        }
        .skill-icon-list-bottom {
            margin-bottom: .5rem;
        }
        .sub-title {
            display: inline-block;
            width: 100%;
            .fs(28);
        }
        .position-title {
            h2 {
                color: @c-white;
            }
            h2.special-title {
                margin: .3rem auto .15rem;
            }
            h3 {
                color: @c-white;
            }
            .color-c3 {
                color: @c-c3;
            }
        }
        .margin-bg {
            margin-top: .3rem;
        }
        .small-sub-title {
            padding: 0 .3rem;
            margin-top: .18rem;
            height: .35rem;
            line-height: .35rem;
            li {
                display: block;
                color: @c-black;
                .fs(28);
                text-align: center;
                &.active {
                    color: @c-white;
                    background: @c-blue;
                }
            }
            .first {
                border: 1px solid @border-c;
                &.active {
                    border: none;
                }
            }
            .second {
                border-top: 1px solid @border-c;
                border-bottom: 1px solid @border-c;
                &.active {
                    border: none;
                }
            }
            .third {
                border: 1px solid @border-c;
                &.active {
                    border: none;
                }
            }
        }
        .small-sub-content {
            padding-bottom: .4rem;
            width: 100%;
            p {
                color: @c-12;
            }
        }
        .small-sub-menu-title {
            margin: .25rem auto .05rem;
        }
        .icon-list {
            i {
                display: block;
                margin: .18rem auto .05rem;
                width: .5rem;
                height: .5rem;
            }
            .qytxl-icon {
                background: url("../img/mxy/3/3-1-qytxl.png") no-repeat center;
                background-size: 100% 100%;
            }
            .jslt-icon {
                background: url("../img/mxy/3/3-1-jslt.png") no-repeat center;
                background-size: 100% 100%;
            }
            .dhhy-icon {
                background: url("../img/mxy/3/3-1-dhhy.png") no-repeat center;
                background-size: 100% 100%;
            }
            .qyfwh-icon {
                background: url("../img/mxy/3/3-1-qyfwh.png") no-repeat center;
                background-size: 100% 100%;
            }
            .qyyx-icon {
                background: url("../img/mxy/3/3-1-qytyx.png") no-repeat center;
                background-size: 100% 100%;
            }
            .xzq-icon {
                background: url("../img/mxy/3/3-1-xzq.png") no-repeat center;
                background-size: 100% 100%;
            }
            .tsq-icon {
                background: url("../img/mxy/3/3-1-tsq.png") no-repeat center;
                background-size: 100% 100%;
            }
            .kqqd-icon {
                background: url("../img/mxy/3/3-2-kqqd.png") no-repeat center;
                background-size: 100% 100%;
            }
            .lcsp-icon {
                background: url("../img/mxy/3/3-2-lcsp.png") no-repeat center;
                background-size: 100% 100%;
            }
            .rcgl-icon {
                background: url("../img/mxy/3/3-2-rcgl.png") no-repeat center;
                background-size: 100% 100%;
            }
            .zyjy-icon {
                background: url("../img/mxy/3/3-2-zyjy.png") no-repeat center;
                background-size: 100% 100%;
            }
            .khbf-icon {
                background: url("../img/mxy/3/3-2-khbf.png") no-repeat center;
                background-size: 100% 100%;
            }
            .zxdc-icon {
                background: url("../img/mxy/3/3-2-zxtc.png") no-repeat center;
                background-size: 100% 100%;
            }
            .kcpx-icon {
                background: url("../img/mxy/3/3-2-kcpx.png") no-repeat center;
                background-size: 100% 100%;
            }
            .tzgg-icon {
                background: url("../img/mxy/3/3-2-tzgg.png") no-repeat center;
                background-size: 100% 100%;
            }
            .dxhyyy-icon {
                background: url("../img/mxy/3/3-2-dxhtyy.png") no-repeat center;
                background-size: 100% 100%;
            }
            .wdyy-icon {
                background: url("../img/mxy/3/3-3-wdyy.png") no-repeat center;
                background-size: 100% 100%;
            }
            .yyph-icon {
                background: url("../img/mxy/3/3-3-yyph.png") no-repeat center;
                background-size: 100% 100%;
            }
            .yyfl-icon {
                background: url("../img/mxy/3/3-3-yyfl.png") no-repeat center;
                background-size: 100% 100%;
            }
            .yjpl-icon {
                background: url("../img/mxy/3/3-3-yjpl.png") no-repeat center;
                background-size: 100% 100%;
            }
        }
        .first-icon-list-top {
            padding: 0 .15rem;
        }
        .first-icon-list-bottom {
            padding: 0 .4rem;
        }
        .position-title {
            width: 100%;
        }
        .p-padding {
            display: inline-block;
            padding-left: .3rem;
            padding-right: .3rem;
            text-align: left;
            .fs(28);
            .set(line-height, 48);
        }
        .case-item {
            padding-bottom: .5rem;
            width: 100%;
            height: auto;
            overflow: hidden;
            border-bottom: 1px solid @border-c;
        }
        .supply-chain-case {
            background: #f8f8f8;
        }
        .office-case {
            //padding-left: .15rem;
            //padding-right: .15rem;
        }
        .smart-icon {
            margin: 0 auto .15rem;
            width: .67rem;
            height: .165rem;
        }
        .supplier-icon {
            margin: .3rem auto .2rem;
            width: .965rem;
            height: .165rem;
        }
        .mx-icon {
            margin: .3rem auto 0;
            width: .605rem;
            height: .175rem;
        }
        .mx-case-img {
            margin: 0 auto;
            width: 3.09rem;
            height: 2.465rem;
        }
        .time-list {
            margin-top: .2rem;
            padding-left: .3rem;
            padding-right: .3rem;
            p {
                display: inline-block;
                margin: 0;
                padding-top: .05rem;
                padding-bottom: .08rem;
                padding-left: .15rem;
                width: 100%;
                .fs(28);
                text-align: left;
                span {
                    color: #1cbaff;
                }
            }
        }
        .blue-round {
            position: absolute;
            top: .1rem;
            left: 0;
            width: .07rem;
            height: .07rem;
            -wenkit-border-radius: 50%;
            border-radius: 50%;
            background: #1cbbff;
        }
        .blue-line {
            position: absolute;
            left: .035rem;
            top: 0;
            bottom: 0;
            width: 0;
            height: 100%;
            border-left: 1px solid #1cbbff;
        }
        .first-blue-line {
            top: .1rem;
        }
        .last-blue-line {
            height: 32%;
        }
        .case-img {
            margin-top: .2rem;
            padding-left: .3rem;
            width: 100%;
            height: auto;
            overflow: scroll;
            font-size: 0;
            .img-list {
                width: 6rem;
                height: 2.35rem;
            }
            .img-list-text {
                width: 6rem;
                font-size: 0;
                p {
                    margin-right: .14rem;
                    display: inline-block;
                    width: 1.25rem;
                    .fs(28);
                    text-align: center;
                }
            }
            img {
                margin-right: .14rem;
                display: inline-block;
                width: 1.25rem;
                -webkit-box-shadow: 0px 3px 2px 2px #e7e7e7;
                box-shadow: 0px 3px 2px 2px #e7e7e7;
            }
        }
        // 样式调整
        .block {
            display: block;
        }
        .color-12 {
            color: #121212;
        }
        .margin-0-30 {
            margin: 0 auto .15rem;
        }
        .margin-0-40 {
            margin: 0 auto .2rem;
        }
        .margin-70-20 {
            margin: .35rem auto .1rem;
        }
        .margin-60-25 {
            margin: .3rem auto .125rem;
        }
        .margin-50-20 {
            margin: .25rem auto .1rem;
        }
        .no-margin-top {
            margin-top: 0;
        }
        .font-28 {
            .fs(28);
        }
    }
}

// 兼容iphone 4和5(由于屏幕适配方案,因此宽度为640)
@media screen and (max-width: 640px) {
    .content-list li .sub-title {
        display: block;
        .fs(26);
    }
}
.solution-jump-detail {
    padding: .35rem 0 .4rem 0;
    text-align: center;
    .jump-text {
        .fs(35);
        span {
            color: #666;
        }
    }
    .jump-area {
        margin-top: .2rem;
        line-height: .3rem;
        .button-item {
            display: inline-block;
            width: 1.42rem;
            .fs(28);
            border: 1px solid #ddd;
            background: url(../img/aboutUs/introduce_arrow.png) no-repeat 70% center;
            background-size: .05rem;
        }
    }
}